<template>
	<vxe-grid ref='configMaintainGridRef' v-bind='tableConfig'>
		<template v-slot:form>
			<n-flex align='center' justify='space-evenly'>
				<n-form-item label='配置名称' label-placement='left' :show-feedback='false'>
					<n-input v-model:value='tableConfig!.formConfig!.data.configName' type='text'
							 placeholder='请输入配置名称' clearable/>
				</n-form-item>
				<n-form-item label='配置状态' label-placement='left' :show-feedback='false'>
					<n-switch v-model:value='tableConfig!.formConfig!.data.status as boolean'
							  :checked-value='true' :unchecked-value='false'>
						<template v-slot:checked>是</template>
						<template v-slot:unchecked>否</template>
					</n-switch>
				</n-form-item>
				<n-form-item :show-label='false' :show-feedback='false'>
					<n-button round strong :bordered='false'
							  type='success' @click='initTable'>
						搜索
					</n-button>
					<n-button round strong :bordered='false'
							  type='info' @click='reset'>
						重置
					</n-button>
				</n-form-item>
			</n-flex>
		</template>
		<template v-slot:toolbar_buttons>
			<n-button round strong @click='showAddModal'>
				<template v-slot:icon>
					<ClassIcon icon-class='fa fa-plus'/>
				</template>
				新增
			</n-button>
		</template>
		<template v-slot:toolbar_tools>
			<div class='vxe-custom--wrapper'>
				<n-button circle @click='initTable'>
					<template v-slot:icon>
						<ClassIcon icon-class='fa fa-refresh'/>
					</template>
				</n-button>
				<!--<vxe-button
					circle icon='fa fa-download' title='导出Excel'
					@click='exportExcel'/>-->
			</div>
		</template>
		<template v-slot:operate='{ row }'>
			<n-button round strong @click='showEditModal(row)'>
				<template v-slot:icon>
					<ClassIcon icon-class='fa fa-edit'/>
				</template>
			</n-button>
			<n-button round strong @click='remove(row)'>
				<template v-slot:icon>
					<ClassIcon icon-class='fa fa-remove'/>
				</template>
			</n-button>
		</template>
	</vxe-grid>
	<AddModal ref='addModalRef' v-bind='addModalConfig'/>
	<EditModal ref='editModalRef' v-bind='editModalConfig'/>
</template>
<script lang='ts' setup>
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
import axios from '@/config/axios/index.ts';
import { VxeGrid, VxeUI } from '@/config/vxe/index.ts';
import { ModalEventTypes, VxeGridInstance, VxeGridProps } from 'vxe-table';
import type { JsonResultProps } from '#/JsonResult.d.ts';
import type { Options } from '#/Options.d.ts';
// ---------------------------------------------------------------------------------------
const ClassIcon = defineAsyncComponent(() => import('@/components/customComponents/icon/ClassIcon.vue'));
// ---------------------------------------------------------------------------------------
// 新增模态框组件引入
const AddModal = defineAsyncComponent(() => import('./addModal.vue'));
// 编辑模态框组件引入
const EditModal = defineAsyncComponent(() => import('./editModal.vue'));
// ---------------------------------------------------------------------------------------
const props = defineProps({
	params : {
		type    : Object,
		require : false,
		default : null
	}
});
// ---------------------------------------------------------------------------------------
const tableConfig = reactive<VxeGridProps>({
	loading        : false,
	height         : 'auto',
	align          : 'center',
	rowConfig      : {
		keyField : 'configName'
	},
	keyboardConfig : { isArrow : true },
	pagerConfig    : {
		currentPage : 1,
		pageSize    : 10,
		total       : 0
	},
	toolbarConfig  : {},
	formConfig     : {
		enabled : false,
		data    : {
			configName : null,
			status     : null
		}
	},
	columns        : [
		{
			field        : 'configName',
			title        : '配置名称',
			showOverflow : 'tooltip',
			sortable     : true
		},
		{
			field        : 'configValue',
			title        : '配置值',
			showOverflow : 'tooltip',
			sortable     : true
		},
		{
			field        : 'sort',
			title        : '排序',
			showOverflow : 'tooltip',
			sortable     : true
		},
		{
			field        : 'status',
			title        : '配置状态',
			showOverflow : 'tooltip',
			sortable     : true,
			cellRender   : {
				name   : 'n-switch',
				props  : {
					size           : 'large',
					checkedValue   : true,
					uncheckedValue : false,
					slots          : {
						checked   : '启用',
						unchecked : '禁用'
					}
				},
				events : {
					toggleEvent : async (row: any) => toggleStatus(row)
				}
			}
		},
		{
			title        : '操作',
			showOverflow : 'tooltip',
			slots        : {
				// 使用 JSX 渲染
				default : 'operate'
			}
		}
	],
	data           : [],
	// @ts-ignore
	onPageChange : (params: any) => changePage(params),
	// @ts-ignore
	onFormSubmit : () => queryCondition()
});
const addModalConfig = reactive({
	reLoad : () => initTable()
});
const editModalConfig = reactive({
	reLoad : () => initTable()
});
// ---------------------------------------------------------------------------------------
// 表格引用
const configMaintainGridRef = ref<VxeGridInstance>();
// 新增模态框引用
const addModalRef = ref<InstanceType<typeof AddModal>>();
// 编辑模态框引用
const editModalRef = ref<InstanceType<typeof EditModal>>();
// ---------------------------------------------------------------------------------------
onMounted(() => {
	initTable();
});
const initTable = async () => {
	tableConfig.loading = true;
	configMaintainGridRef.value?.clearCurrentRow();
	configMaintainGridRef.value?.clearCurrentColumn();
	tableConfig!.formConfig!.data = {
		...tableConfig!.formConfig!.data,
		pageNum  : tableConfig.pagerConfig!.currentPage,
		pageSize : tableConfig.pagerConfig!.pageSize
	};
	axios<any, JsonResultProps<any>, any>({
		method : 'POST',
		url    : '/sysConfig/pagingList',
		data   : tableConfig.formConfig!.data
	}).then((jsonResult: JsonResultProps<any>) => {
		if (jsonResult.status) {
			tableConfig.pagerConfig!.total = jsonResult.data.total;
			tableConfig.data = jsonResult.data.records;
			tableConfig.loading = false;
		} else {
			VxeUI.modal.message({
				content : jsonResult.msg,
				status  : 'warning',
				id      : 'failedMessage'
			});
		}
	}).catch((error: unknown) => {
		console.error(error);
		VxeUI.modal.message({
			content : '系统异常,请稍后再试',
			status  : 'error',
			id      : 'errorMessage'
		});
	});
};
const queryCondition = async () => {
	await initTable();
};
const changePage = async ({ currentPage, pageSize }: { currentPage: number, pageSize: number }) => {
	tableConfig.pagerConfig!.currentPage = currentPage;
	tableConfig.pagerConfig!.pageSize = pageSize;
	await initTable();
};
const reset = async () => {
	tableConfig!.formConfig!.data.configName = null;
	tableConfig!.formConfig!.data.status = null;
	await initTable();
};
const toggleStatus = async (rowData: any) => {
	console.log(rowData);
	axios<any, JsonResultProps<any>, any>({
		method : 'PATCH',
		url    : `/sysConfig/status/${rowData.configName}`
	}).then((jsonResult: JsonResultProps<any>) => {
		if (jsonResult.status) {
			initTable();
		} else {
			VxeUI.modal.message({
				content : jsonResult.msg,
				status  : 'warning',
				id      : 'failedMessage'
			});
		}
	}).catch((error: unknown) => {
		console.error(error);
		VxeUI.modal.message({
			content : '系统异常,请稍后再试',
			status  : 'error',
			id      : 'errorMessage'
		});
	});
};
const showAddModal = async () => {
	await addModalRef.value!.showModal();
};
const showEditModal = async (row: unknown) => {
	await editModalRef.value!.showModal(row);
};
const remove = async (row: any) => {
	VxeUI.modal.confirm({
		content : '您确定要删除该数据吗?',
		title   : '确认删除',
		id      : 'deleteModalUnique'
	}).then((type: ModalEventTypes): boolean | void => {
		if ('confirm' === type) {
			axios<any, JsonResultProps<any>, any>({
				method : 'DELETE',
				url    : `/sysConfig/remove/${row.configName}`
			}).then((jsonResult: JsonResultProps<any>) => {
				if (jsonResult.status) {
					// 提示用户
					VxeUI.modal.message({
						content : jsonResult.msg,
						status  : 'success',
						id      : 'successMessage'
					});
					// 刷新数据
					initTable();
				} else {
					VxeUI.modal.message({
						content : jsonResult.msg,
						status  : 'warning',
						id      : 'failedMessage'
					});
				}
			}).catch((error: unknown) => {
				console.error(error);
				VxeUI.modal.message({
					content : '系统异常,请稍后再试',
					status  : 'error',
					id      : 'errorMessage'
				});
			});
		}
	});
};
</script>